<template>
  <div >
      <div id="echarTwo" ref="echarTwo"></div>
  </div>
</template>
<script>
export default {
    name: 'echarTwo',
    mounted() {
        this.initCharts()
    },
    props: ['cageXData','cageYData'],
    methods: {
        initCharts() {
            let that = this;
            let chartTwo = that.$echarts.init(that.$refs.echarTwo);
            let option = {
                yAxis: {
                    name: '鸽笼状态',
                    type: "category",
                    data: that.cageYData,
                },
                xAxis: {
                    name: '数量/个',
                    type: "value",
                },
                title: {
                    text: "鸽笼状态数量：",
                    show: "true",
                    textStyle: {
                        fontWight: "normal",
                    },
                    left: 'center'
                },
                tooltip: {
                    trigger: "item", 
                    triggerOn: "mousemove", //什么事件可以触发提示框
                    formatter: "需{b}鸽笼数量为{c}"
                },
                series: [
                    {
                        name: "鸽笼状态", 
                        type: "bar", 
                        data: that.cageXData, 
                        color: "#5dadff",
                        // borderWidth: 5,
                    },
                ],
            };

            chartTwo.setOption(option);
        }
    }
}
</script>
<style lang="scss" scoped>
#echarTwo {
    width: 580px;
    height: 350px;
}
</style>